<template>
    <main-layout>
        <div class="cart-box">
            <header>
                肖家河大厦
                <span>{{isEdit ? "完成" : "编辑"}}</span>
            </header>
            <article>
                <div class="cart-product-item" v-for="item in list" :key="item.id">
                    <van-checkbox v-model="item.checked" checked-color="#ee0a24"></van-checkbox>
                    <img :src="item.image" alt="">
                    <div class="content">
                        <div class="info">{{item.title}}</div>
                        <div class="msg">{{item.couponValue}}</div>
                        <div class="opt">
                            <span><em>￥</em>{{item.price}}</span>
                            <span class="r">
                                <i @click="btnEvt('minus', item)"></i>
                                {{item.count}}
                                <i @click="btnEvt('add', item)" class="add"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </article>
            <footer>
                <van-checkbox v-model="all" checked-color="#fff">全选</van-checkbox>
                <div class="info">
                    <span><em>￥</em>{{totalAmount - totalDiscount}}</span>
                    <div>已优惠：￥{{totalDiscount}}</div>
                </div>
                <van-button round>去结算({{totalCount}})</van-button>
            </footer>
        </div>
    </main-layout>
</template>

<script>
    import { cartListApi,cartAddApi } from '../../apis/cartApi'

    export default {
        data() {
            return {
                isEdit: false,
                list: [
                    {id:1187599,title:"腰间盘突出专用贴膏腰肌劳损腰疼膏贴质增生颈椎肩周贴膏",couponValue:"5元券",price:43,image:"https://img.alicdn.com/bao/uploaded/i2/2108347738/O1CN01Pip6Uj2723UgkVyoY_!!0-item_pic.jpg",count:1},
                    {id:75829519,title:"班尼路短袖t恤男夏季休闲百搭纯色体恤半袖春秋打底衫青年t",couponValue:"3元券",price:66,image:"https://img.alicdn.com/bao/uploaded/i4/2456386471/O1CN01dHukzU1xflgEQAU0N_!!0-item_pic.jpg",count:1}
                ],
                all: false,
            }
        },

        // 进入页面就应该去获取数据
        // async created() {
        //     let result = await cartAddApi()
        //     if (result.code === 200) {
        //         // 需要设置所有的选择为没有选择上
        //         this.list = result.data.product.map(it => {
        //             it.checked = false
        //             return it
        //         })
        //     }
        // },

        //全选
        
        computed: {
            // 实付
            totalAmount() {
                return this.list.reduce((_t, _it) => {
                    if (_it.checked) _t += Number((_it.count * _it.price).toFixed(2))
                    return _t
                }, 0)
            },

            // 已优惠
            totalDiscount() {
                return this.list.reduce((_t, _it) => {
                    if (_it.checked) _t += _it.count * parseInt(_it.couponValue)
                    return _t
                }, 0)
            },

            // 去结算
            totalCount() {
                return this.list.reduce((_t, _it) => {
                    if (_it.checked)  _t += _it.count
                    return _t
                }, 0)
            },
            
            
        },

        methods: {
            btnEvt(type, it) {
                this.list = this.list.map(item => {
                    if (it.id === item.id) {
                        let nowCount = type === 'add' ? item.count + 1 : item.count < 2 ? 1 : item.count - 1
                        item.count = nowCount
                    }
                    return item
                })
            }
        }
    }
</script>

<style lang="less">
    @import "../../style/common.less";

    .cart-product-item {
        display: flex;
        padding: 10px;
        border-radius: 6px;
        background: #fff;
        margin: 0 12px 12px;
        .van-checkbox {
            flex: 0 0 30px;
            font-size: .8rem;
        }
        img {
            flex: 0 0 96px;
            height: 96px;
            width: 0;
            border: solid 1px #eaeaea;
            border-radius: 4px;
        }
        .content {
            flex: 1;
            padding-left: 12px;
            width: 0;
            > .info,
            > .msg {
                display: block;
                font-size: .9rem;
                color: #1e1e1e;
                font-weight: 600;
                line-height: 26px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
            > .msg {
                color: #999;
                font-size: .65rem;
                font-weight: 400;
            }
            > .opt {
                display: flex;
                height: 44px;
                justify-content: space-between;
                span {
                    flex: 0 0 56px;
                    line-height: 44px;
                    font-size: 1rem;
                    font-weight: 500;
                    color: #ea1728;
                    em {
                        font-size: .7rem;
                        font-style: normal;
                    }
                    &.r {
                        flex: 1;
                        font-size: .8rem;
                        color: #333;
                    }
                    i {
                        display: inline-block;
                        vertical-align: bottom;
                        width: 34px;
                        height: 44px;
                        background: url('../../images/cart/minus-icon.png') center center / 26px 26px no-repeat;
                        &.add {
                            background-image: url('../../images/cart/add-icon.png');
                        }
                    }
                }
            }
        }
    }

    .cart-box {
        display: block;
        height: 100%;
        header {
            display: block;
            position: relative;
            text-align: center;
            height: 37px;
            font-size: .7rem;
            border-bottom: solid 1px #bbb;
            background: #fff;
            line-height: 36px;
            .clear();
            &::before {
                content: '';
                display: inline-block;
                vertical-align: bottom;
                height: 36px;
                width: 12px;
                background: url('../../images/cart/address.png') center center / 20px 18px no-repeat;
            }
            span {
                float: right;
                height: 36px;
                width: 48px;
                line-height: 36px;
                font-size: .75rem;
                text-align: center;
                color: #333;
            }
        }

        article {
            display: block;
            padding-top: 12px;
            height: calc(100% - 57px - 37px);
        }

        footer {
            display: flex;
            position: relative;
            height: 57px;
            border-top: solid 1px #bbb;
            background: #ea1728;
            .info {
                flex: 1;
                padding-left: 8px;
                span {
                    display: block;
                    font-size: 1rem;
                    color: #fff;
                    height: 32px;
                    line-height: 36px;
                    &::before {
                        content: "实付:";
                        display: inline-block;
                        vertical-align: middle;
                        font-size: .8rem;
                    }
                    em {
                        font-size: .65rem;
                        font-style: normal;
                    }
                }
                > div {
                    display: block;
                    height: 24px;
                    font-size: .8rem;
                    color: #fff;
                    line-height: 24px;
                }
            }
            .van-checkbox {
                flex: 0 0 80px;
                font-size: .8rem;
                padding-left: 12px;
                .van-checkbox__label {
                    color: #fff;
                }
                .van-icon-success:before {
                    color: #ea1728;
                }
            }
            .van-button--round {
                flex: 0 0 120px;
                height: 42px;
                margin-top: 7px;
                margin-right: 8px;
            }
        }
    }
</style>